<template>
  <el-row class="analysisWrap">
    <el-row class="title" type="flex" justify="space-between">
      <el-col type="flex">
        <el-col style="width: 26px">
          <img height="24" src="../../../assets/images/left.png"/>
        </el-col>
        <el-col align="center" style="line-height: 30px;width: 200px">{{ $store.getters.getLocation }}综合趋势分析</el-col>
        <el-col style="width: 26px">
          <img height="24" src="../../../assets/images/right.png"/>
        </el-col>
        <el-col style="padding-left:20px;width: 300px;color: #00DDFF;font-size: 16px;font-weight: normal">
          {{ year }}年{{ month }}月<span v-if="date_type===10">{{ day }}日</span>
        </el-col>
      </el-col>
    </el-row>
    <el-row style="height: 28px">
      <el-row type="flex" justify="space-between">
        <el-col style="padding-left: 40px">
          <div :class="data_type==='all' ? 'isActive' :''" class="typeBtn" @click="data_type='all';getTrend()">综合</div>
          <div :class="data_type==='http' ? 'isActive' :''" class="typeBtn" @click="data_type='http';getTrend()">网站</div>
          <div :class="data_type==='flash' ? 'isActive' :''" class="typeBtn" @click="data_type='flash';getTrend()">视频</div>
          <div :class="data_type==='dns' ? 'isActive' :''" class="typeBtn" @click="data_type='dns';getTrend()">DNS</div>
        </el-col>
        <el-col align="right">
          <div :class="date_type===20 ? 'isActive' :''" class="typeBtn" @click="date_type=20;getTrend()">月</div>
          <div :class="date_type===30 ? 'isActive' :''" class="typeBtn" @click="date_type=30;getTrend()">周</div>
          <div :class="date_type===10 ? 'isActive' :''" class="typeBtn" @click="date_type=10;getTrend()">日</div>
        </el-col>
      </el-row>
    </el-row>
    <el-row style="height:calc(100% - 68px);">
      <FourLineCharts
        :chartData="chartData"
        :height="'100%'"
        :xTitle="date_type === 10 ? '时' : '天'"
      />
    </el-row>
  </el-row>
</template>

<script>
  import FourLineCharts from './FourLineCharts'
  export default {
    name: 'LinePart',
    components: {
      FourLineCharts
    },
    data() {
      return {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate(),
        chartData: {
          dataY: [],
          dataLine: [],
          minY: 85,
          maxY: 95,
          dateType: 20
        },
        date_type: 20,
        data_type: 'all',
        code: null
      }
    },
    created() {
      this.$bus.$off('provinceChangedLine')
      this.$bus.$on('provinceChangedLine', this.getTrend)
    },
    methods: {
      getTrend(code){
        if (code) {
          this.code = code
        }
        window._api.apiQualityAnalyseSix({
          date_type: this.date_type,
          user_code: this.code,
          data_type: this.data_type
        }).then(res => {
          if (res.state === 0) {
            this.chartData.dateType = this.date_type
            this.chartData.dataY = []
            this.chartData.dataLine = []
            res.data.map(item => {
              this.chartData.dataLine.push(item.score)
              this.chartData.dataY.push(item.data_date)
            })
            const target = JSON.parse(JSON.stringify(this.chartData.dataLine)).sort((a, b) => (a - b))
            // this.chartData.minY = (target[0] - 10) < 0 ? 40 : (Math.floor((target[0] - 10) / 10) * 10)
            this.chartData.minY = Math.floor(+target[0])
            this.chartData.maxY = Math.ceil(+target[target.length - 1])
            if (this.date_type === 10 && res.data.length > 0) {
              const dataEnd = this.chartData.dataY[this.chartData.dataY.length - 1]
              const partBegin = dataEnd.substring(0,11)
              const partMid = dataEnd.substring(11,13)
              const partLast = dataEnd.substring(13,19)
              const num  = 24 - res.data.length
              // 补零
              for (let i = 0;i < num;i++) {
                // this.chartData.dataLine.push(0)
                this.chartData.dataY.push(`${partBegin}${(+partMid+i+1) < 10 ? '0' + (+partMid+i+1) : +partMid+i+1 }${partLast}`)
              }
            }
          // else {
          //     this.markTag(this.chartData.dataY)
          //   }
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      markTag(data) {
        let arr = []
        data.map(item => {
          arr.push(item.substring(0,10))
        })
        const yearMonthDay = Array.from(new Set(arr))
        yearMonthDay.map(item => {
          data[arr.findIndex(i => i === item)] +='*'
        })
        console.log(data)
      }
    }
  }
</script>

<style scoped>
  .title{
    font-size: 20px;
    line-height: 40px;
    height: 40px;
    text-align: left;
    padding: 0px 16px;
    color: #00DDFF;
    font-weight: bold;
  }
.analysisWrap{
  height: 32vh;
  padding: 14px;
  background: rgba(14, 22, 95, 0.4);
  border: 1px solid rgba(14,101,187,0.46);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
}
.typeBtn{
  display: inline-block;
  margin-right: 8px;
  width: 44px;
  height: 28px;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(180deg, #33367b 0%, #050d25 100%);
  box-shadow: 0px 0px 4px 0px #121212 inset;
  cursor: pointer;
}
.isActive{
  background: linear-gradient(180deg, #14c473 0%, #0679dc 30%,#05091e 100%);
  box-shadow: 0px 0px 4px 0px #151515 inset;
}
</style>
